<template>
    <el-carousel trigger="click" height="500px" style="width: 100%">
        <el-carousel-item v-for="s in sliders" :key="s.src">
            <img :src="s.src" style="width: 100%;height: 500px">
        </el-carousel-item>
    </el-carousel>
    <div class="home-page app-container">
        <div id="recommend">
            <!-- 推荐 -->
            <el-row :gutter="20">
                <el-col :span="6" v-for="i in 4" :key="i">
                    <div class="goods-image">
                        <img src="./../assets/pic_03.png" alt="">
                    </div>
                    <div class="goods-name text-center">
                        xxx
                    </div>
                    <div class="info">
                        <el-tag size="mini">Tag 1</el-tag>
                        <span class="text">哈根达斯月饼风味酸奶冰淇淋</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <template v-for="category in categories">
            <HomeCategory :category-data="category"/>
        </template>
    </div>

</template>

<script>
// 如何使用组件 1.import导入组件 2.通过components属性设置组件
import HomeCategory from "./../components/HomeCategory.vue";

export default {
    name: "Home",
    components: {HomeCategory},
    data() {
        const _category = {
            title: '水果蛋糕',
            id: 2,
            goods: {
                specRecommend: [
                    {
                        id: '1',
                        name: '歌帝梵',
                        description: '',
                        price: '1',
                        picture: '',
                        recommendPicture: 'https://z3.ax1x.com/2021/12/01/o8ge2T.jpg'
                    },
                    {
                        id: '2',
                        name: '伏格雷',
                        description: '',
                        price: '2',
                        picture: '',
                        recommendPicture: 'https://z3.ax1x.com/2021/12/01/o8gZGV.jpg'
                    },
                ],
                normalRecommend: [
                    {
                        id: '4',
                        name: '西瓜乐',
                        description: '快乐一夏',
                        price: '',
                        picture: '',
                        recommendPicture: 'https://z3.ax1x.com/2021/12/01/o8gVP0.jpg'
                    },
                    {
                        id: '4',
                        name: '西瓜乐1',
                        description: '快乐一夏1',
                        price: '',
                        picture: '',
                        recommendPicture: 'https://z3.ax1x.com/2021/12/01/o8gVP0.jpg'
                    },
                    {
                        id: '4',
                        name: '西瓜乐2',
                        description: '快乐一夏2',
                        price: '',
                        picture: '',
                        recommendPicture: 'https://z3.ax1x.com/2021/12/01/o8gVP0.jpg'
                    }
                ]
            }
        };
        return {
            sliders: [
                {
                    src: './../assets/banner_01.jpg',
                    link: ''
                },
                {
                    src: './../assets/banner_02.jpg',
                    link: ''
                }
            ],
            categories : Array(4).fill(_category)
        }
    },
    // 组件加载完成后出发
    mounted() {
        fetch('http://localhost:12345/index/recommend')
            .then(res => res.json())
            .then(data => {
                this.sliders = data;
            })
            .catch(err => {
            })
            .finally(() => {

            })
    }
}
</script>

<style scoped lang="less">
#recommend {
    margin-top: 10px;

    .goods-name {
        font-size: 16px;
        color: #f00
    }
}

</style>